<template>
  <!--学习记录-->
    <div>
      <!--排行-->
      <div v-if="show==1" class="content">
        <div class="peopleData">
          <div class="time disp">
            <div>{{peopleData.studyTime/3600 | numFilter}}</div>
            <div>学习时长(小时)</div>
            <div>top{{peopleData.studyTimeRanking}}</div>
            <div class="crown" v-if="peopleData.studyTimeRanking<=10">
              <img src="../../assets/images/crown.png" />
            </div>
          </div>
          <div class="frequency disp">
            <div>{{peopleData.examCount}}</div>
            <div>模拟次数</div>
            <div>top{{peopleData.examCountRanking}}</div>
            <div class="crown" v-if="peopleData.examCountRanking<=10">
              <img src="../../assets/images/crown.png" />
            </div>
          </div>
          <div class="rate disp">
            <div>{{peopleData.correctRate*100}}%</div>
            <div>正确率</div>
            <div>top{{peopleData.correctRateRanking}}</div>
            <div class="crown" v-if="peopleData.correctRateRanking<=10">
              <img src="../../assets/images/crown.png" />
            </div>
          </div>

          <div class="number disp">
            <div>{{peopleData.numberOfAnswers}}</div>
            <div>最高分</div>
            <div>&nbsp;</div>
            <div class="crown" v-if="peopleData.numberOfAnswersRanking<=10">
              <img src="../../assets/images/crown.png" />
            </div>
          </div>
        </div>
      </div>
      <!--学习记录-->
      <div v-if="show==1" class="tabs">
        <Table :columns="columns1" :data="data1"></Table>
        <div @click="load1" style="text-align: center;margin-top: 13px; cursor: pointer;">查看更多</div>
      </div>
      <div v-if="show==0">
        <div style="margin:181px auto 0 auto;width: 160px;height: 163px;">
          <img src="../../assets/images/cuoti.png" height="163" width="160"/>
        </div>
        <div style="text-align: center;margin-top:18px;font-size: 18px;color: #3B50A1">
          您还没有错题记录，继续保持努力！
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
              peopleData:{},//个人数据统计
              columns1: [
                {
                  title: '序号',
                  key: 'letterId',
                  align: 'center',
                },
                { align: 'center',
                  title: '专题',
                  key: 'name'
                },
                { align: 'center',
                  title: '测试时间',
                  key: 'time',
                  "width": 120,
                },
                { align: 'center',
                  title: '时长(分钟)',
                  key: 'frequency'
                },
                { align: 'center',
                  title: '错题数',
                  key: 'daNum'
                },
                { align: 'center',
                  title: '正确率',
                  key: 'percent'
                },
                { align: 'center',
                  title: '得分',
                  key: 'highest'
                }
              ],
              data1: [
//                {
//                  letterId:1,//排名
//                  name: '程纪强的',//姓名
//                  time:1333,//学习时长
//                  daNum:9999,//答题数
//                  frequency:1,//模拟次数
//                  percent:'11%',//正确率
//                  highest:11,//最高分
//                },
              ],
              pageIndex:1,//页数
              show:1,
            }
        },

      methods: {
        load1() {//查看更多
          this.pageIndex++;
          this.listData()
        },
        personalData(){
            var id=this.$cookies.get('pcexam_id')
            this.$axios({
              url: 'web/personalCenter/study/log/statistics/'+id,
              method: 'GET',
              data:{},
              headers: {
                'Content-Type': 'application/json;charset=UTF-8'
              },
              transformRequest: [function(data) {  //json
                data = JSON.stringify(data);
                return data
              }],
            }).then((response) => {
              console.log(response.data);

              if(response.data.length=0){
              //显示空白页
              this.show=0;
              }else {
                this.show=1;
                this.peopleData=response.data;
              }
            }).catch((error) => {
              console.log("调取失败500");
              this.$Message.error('信息获取失败！')
              this.spinShow=false;
            });
          },

        listData(){
          var id=this.$cookies.get('pcexam_id')
          this.$axios({
            url: 'web/personalCenter/study/log',
            method: 'POST',
            data:{
              userId:id,
              pageIndex:this.pageIndex,//多少页
              pageSize:10,//每页大小
            },
            headers: {
              'Content-Type': 'application/json;charset=UTF-8'
            },
            transformRequest: [function(data) {  //json
              data = JSON.stringify(data);
              return data
            }],
          }).then((response) => {
            console.log(response.data);
            var num=(this.pageIndex*10)-10
            for(var i=0;i<response.data.studyLogs.length;i++){
              this.data1.push(
                {
                  letterId: num+(i+1),//序号
                  name: response.data.studyLogs[i].subjectName,//专题
                  time:  response.data.studyLogs[i].beginTime,//测试时间
                  daNum:  response.data.studyLogs[i].wrongOfAnswers,//错题数
                  frequency: (response.data.studyLogs[i].timeCost/60).toFixed(2),//考试用时
                  percent:  (response.data.studyLogs[i].correctRate)*100+'%',//正确率
                  highest:  response.data.studyLogs[i].grade,//最高分
                })
            }
            console.log(this.data1)
          }).catch((error) => {
            console.log("调取失败500");
            this.$Message.error('信息获取失败！')
          });
        },
        },
      mounted:function() {
        //渲染个人数据
        this.personalData();
        //渲染列表
        this.listData();
      },
      filters: {
        numFilter (value) {
          // 截取当前数据到小数点后两位
          let realVal = parseFloat(value).toFixed(2);
          return realVal
        }
      },

    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .content{
  }
  .peopleData{
    position: relative;
    margin:26px auto;
    width:1080px;
    height:165px;
    background:rgba(255,255,255,1);
    box-shadow:0px 0px 11px 0px rgba(4,0,0,0.1);
    border-radius:1px;
    padding: 51px 0 120px 0;
  }
  .peopleData .disp{
    text-align: center;
    display: inline-block;
    width: 265px;
    border-right: 1px  dashed #BDBDBD;
    position: relative;
  }
  .peopleData>div:nth-of-type(4){
    border: none;
  }
  .peopleData>div>div:nth-of-type(1){
    font-size:36px;
    color:rgba(51,51,51,1);
  }
  .peopleData>div>div:nth-of-type(2),.peopleData>div>div:nth-of-type(3){
    font-size: 18px;
    color: #999999;
  }
  .crown{
    width:51px;
    height:45px;
    position: absolute;
    right: 40px;
    top: -35px;
  }
  .crown img{
    width: 100%;
    height: 100%;
  }
  .tabs{
    margin: 0 auto;
    width: 1089px;
    font-size: 14px;
    margin-bottom: 30px;
  }
</style>
